<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站手机端注册页面集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #1877F2;
      --secondary: #6c757d;
      --light: #f8f9fa;
      --dark: #343a40;
      --white: #ffffff;
      --border: #eee;
      --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      
      /* 不同风格主题色 */
      --style1: #1877F2; /* 经典社交蓝 */
      --style2: #E1306C; /* 活力粉 */
      --style3: #25D366; /* 清新绿 */
      --style4: #121212; /* 深色模式 */
      --style5: #FF9800; /* 活力橙 */
      --style6: #673AB7; /* 优雅紫 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    
    /* 页面容器 */
    .register-page {
      display: none;
      padding: 25px 20px;
      min-height: 100vh;
      flex-direction: column;
    }
    
    .register-page.active {
      display: flex;
    }
    
    /* 标题区域 */
    .page-header {
      text-align: center;
      margin-bottom: 30px;
      margin-top: 20px;
    }
    
    .page-title {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    
    .page-subtitle {
      font-size: 15px;
      color: var(--secondary);
      margin-bottom: 0;
    }
    
    /* 表单样式 */
    .register-form {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    
    .form-group {
      margin-bottom: 16px;
    }
    
    .form-label {
      display: block;
      margin-bottom: 6px;
      font-size: 14px;
      font-weight: 500;
    }
    
    .form-control {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 15px;
      transition: all 0.2s;
    }
    
    .form-control:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.1);
    }
    
    .form-hint {
      font-size: 12px;
      color: var(--secondary);
      margin-top: 5px;
    }
    
    .btn {
      padding: 12px 15px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-primary:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }
    
    .btn-outline {
      background-color: transparent;
      border: 1px solid var(--primary);
      color: var(--primary);
    }
    
    .btn-outline:hover {
      background-color: rgba(24, 119, 242, 0.05);
    }
    
    .btn-block {
      width: 100%;
    }
    
    /* 分隔线 */
    .divider {
      display: flex;
      align-items: center;
      margin: 20px 0;
    }
    
    .divider::before,
    .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background-color: #eee;
    }
    
    .divider-text {
      padding: 0 15px;
      font-size: 13px;
      color: var(--secondary);
    }
    
    /* 社交登录按钮 */
    .social-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 12px;
    }
    
    /* 底部文字 */
    .bottom-text {
      text-align: center;
      font-size: 14px;
      color: var(--secondary);
      margin-top: 25px;
    }
    
    .link {
      color: var(--primary);
      font-weight: 500;
      text-decoration: none;
    }
    
    .link:hover {
      text-decoration: underline;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1010;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 控制按钮 */
    .control-buttons {
      padding: 15px 20px;
      display: flex;
      gap: 10px;
      background-color: white;
      border-top: 1px solid var(--border);
    }
    
    .control-btn {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 8px;
      background-color: var(--primary);
      color: white;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    
    /* 各种风格的样式 */
    /* 风格1：经典社交 */
    .style-1 {
      --primary: var(--style1);
    }
    
    /* 风格2：活力粉色 */
    .style-2 {
      --primary: var(--style2);
      background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
    }
    
    .style-2 .container {
      background-color: rgba(255, 255, 255, 0.95);
    }
    
    /* 风格3：清新绿色 */
    .style-3 {
      --primary: var(--style3);
    }
    
    .style-3 .form-control:focus {
      box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1);
    }
    
    /* 风格4：深色模式 */
    .style-4 {
      --primary: var(--style4);
      --dark: white;
      --secondary: #b0b0b0;
      --border: #333;
    }
    
    .style-4 .container {
      background-color: #121212;
      color: white;
    }
    
    .style-4 .form-control {
      background-color: #1e1e1e;
      border-color: #333;
      color: white;
    }
    
    .style-4 .divider::before,
    .style-4 .divider::after {
      background-color: #333;
    }
    
    .style-4 .btn-outline {
      border-color: #444;
    }
    
    /* 风格5：活力橙色 */
    .style-5 {
      --primary: var(--style5);
    }
    
    .style-5 .form-control:focus {
      box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
    }
    
    .style-5 .register-page {
      background-image: url('https://picsum.photos/id/1048/800/1600');
      background-size: cover;
      background-position: center;
    }
    
    .style-5 .form-container {
      background-color: rgba(255, 255, 255, 0.95);
      border-radius: 16px;
      padding: 30px 25px;
      box-shadow: var(--shadow);
    }
    
    /* 风格6：优雅紫色 */
    .style-6 {
      --primary: var(--style6);
    }
    
    .style-6 .form-control {
      border-radius: 25px;
    }
    
    .style-6 .btn {
      border-radius: 25px;
    }
    
    .style-6 .page-header {
      margin-bottom: 40px;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .register-page.active {
      animation: fadeIn 0.3s ease forwards;
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .page-title {
        font-size: 24px;
      }
      
      .btn {
        padding: 10px 12px;
        font-size: 15px;
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择注册页面样式</div>
    <div class="switcher-option active" data-style="1">经典社交</div>
    <div class="switcher-option" data-style="2">活力粉色</div>
    <div class="switcher-option" data-style="3">清新绿色</div>
    <div class="switcher-option" data-style="4">深色模式</div>
    <div class="switcher-option" data-style="5">活力橙色</div>
    <div class="switcher-option" data-style="6">优雅紫色</div>
  </div>
  
  <div class="container">
    <!-- 风格1：经典社交风格 -->
    <div class="register-page style-1 active" id="style1">
      <div class="page-header">
        <h1 class="page-title">创建账号</h1>
        <p class="page-subtitle">加入我们的社交网络，结识更多朋友</p>
      </div>
      
      <div class="register-form">
        <div class="form-group">
          <label class="form-label" for="name1">姓名</label>
          <input type="text" class="form-control" id="name1" placeholder="请输入您的姓名">
        </div>
        
        <div class="form-group">
          <label class="form-label" for="email1">电子邮箱</label>
          <input type="email" class="form-control" id="email1" placeholder="your@email.com">
          <p class="form-hint">我们不会向任何人分享您的邮箱</p>
        </div>
        
        <div class="form-group">
          <label class="form-label" for="password1">设置密码</label>
          <input type="password" class="form-control" id="password1" placeholder="至少8个字符">
          <p class="form-hint">密码需包含字母和数字</p>
        </div>
        
        <button class="btn btn-primary btn-block" style="margin-top: 10px;">注册账号</button>
        
        <div class="divider">
          <div class="divider-text">或者</div>
        </div>
        
        <button class="btn btn-outline btn-block social-btn">
          <i class="fa fa-google"></i>
          <span>使用Google账号注册</span>
        </button>
        
        <button class="btn btn-outline btn-block social-btn">
          <i class="fa fa-apple"></i>
          <span>使用Apple账号注册</span>
        </button>
      </div>
      
      <p class="bottom-text">
        已有账号？<a href="#" class="link">登录</a>
      </p>
    </div>
    
    <!-- 风格2：活力粉色风格 -->
    <div class="register-page style-2" id="style2">
      <div class="page-header">
        <h1 class="page-title">开始您的社交之旅</h1>
        <p class="page-subtitle">注册账号，发现精彩世界</p>
      </div>
      
      <div class="register-form">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="姓名">
        </div>
        
        <div class="form-group">
          <input type="text" class="form-control" placeholder="手机号码">
        </div>
        
        <div class="form-group">
          <input type="password" class="form-control" placeholder="设置密码">
        </div>
        
        <button class="btn btn-primary btn-block" style="margin-top: 10px;">立即注册</button>
        
        <div class="divider">
          <div class="divider-text">用社交账号快速注册</div>
        </div>
        
        <div style="display: flex; gap: 10px;">
          <button class="btn btn-outline" style="flex: 1;">
            <i class="fa fa-weixin"></i>
          </button>
          <button class="btn btn-outline" style="flex: 1;">
            <i class="fa fa-qq"></i>
          </button>
          <button class="btn btn-outline" style="flex: 1;">
            <i class="fa fa-weibo"></i>
          </button>
        </div>
      </div>
      
      <p class="bottom-text">
        注册即表示您同意我们的<a href="#" class="link">服务条款</a>和<a href="#" class="link">隐私政策</a>
      </p>
    </div>
    
    <!-- 风格3：清新绿色风格 -->
    <div class="register-page style-3" id="style3">
      <div class="page-header">
        <div style="font-size: 40px; color: var(--primary); margin-bottom: 15px;">
          <i class="fa fa-leaf"></i>
        </div>
        <h1 class="page-title">加入绿色社交</h1>
        <p class="page-subtitle">与志同道合的朋友一起分享生活</p>
      </div>
      
      <div class="register-form">
        <div class="form-group">
          <label class="form-label">用户名</label>
          <input type="text" class="form-control" placeholder="创建您的用户名">
        </div>
        
        <div class="form-group">
          <label class="form-label">电子邮箱</label>
          <input type="email" class="form-control" placeholder="您的邮箱地址">
        </div>
        
        <div class="form-group">
          <label class="form-label">出生日期</label>
          <input type="date" class="form-control">
        </div>
        
        <div class="form-group">
          <label class="form-label">密码</label>
          <input type="password" class="form-control" placeholder="创建您的密码">
        </div>
        
        <button class="btn btn-primary btn-block">创建账号</button>
      </div>
      
      <p class="bottom-text">
        已有账号？<a href="#" class="link">登录</a>
      </p>
    </div>
    
    <!-- 风格4：深色模式风格 -->
    <div class="register-page style-4" id="style4">
      <div class="page-header">
        <h1 class="page-title">注册新账号</h1>
        <p class="page-subtitle">连接世界，从这里开始</p>
      </div>
      
      <div class="register-form">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="全名">
        </div>
        
        <div class="form-group">
          <input type="email" class="form-control" placeholder="邮箱地址">
        </div>
        
        <div class="form-group">
          <input type="password" class="form-control" placeholder="密码">
        </div>
        
        <button class="btn btn-primary btn-block" style="background-color: #2196F3; margin-top: 10px;">
          注册
        </button>
        
        <div class="divider">
          <div class="divider-text">其他登录方式</div>
        </div>
        
        <button class="btn btn-outline btn-block">
          <i class="fa fa-github mr-2"></i>GitHub
        </button>
        
        <button class="btn btn-outline btn-block">
          <i class="fa fa-twitter mr-2"></i>Twitter
        </button>
      </div>
      
      <p class="bottom-text">
        注册即表示您同意我们的<a href="#" class="link">条款</a>和<a href="#" class="link">隐私政策</a>
      </p>
    </div>
    
    <!-- 风格5：活力橙色风格 -->
    <div class="register-page style-5" id="style5">
      <div class="form-container">
        <div class="page-header">
          <h1 class="page-title">免费注册</h1>
          <p class="page-subtitle">开启您的社交新体验</p>
        </div>
        
        <div class="register-form">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="姓名">
          </div>
          
          <div class="form-group">
            <input type="tel" class="form-control" placeholder="手机号码">
          </div>
          
          <div style="display: flex; gap: 10px;">
            <div class="form-group" style="flex: 2;">
              <input type="text" class="form-control" placeholder="验证码">
            </div>
            <div class="form-group" style="flex: 1;">
              <button class="btn btn-outline" style="width: 100%; height: 100%;">获取</button>
            </div>
          </div>
          
          <div class="form-group">
            <input type="password" class="form-control" placeholder="设置密码">
          </div>
          
          <button class="btn btn-primary btn-block">完成注册</button>
          
          <p class="bottom-text" style="margin-top: 15px;">
            已有账号？<a href="#" class="link">登录</a>
          </p>
        </div>
      </div>
    </div>
    
    <!-- 风格6：优雅紫色风格 -->
    <div class="register-page style-6" id="style6">
      <div style="text-align: center; margin-bottom: 30px;">
        <div style="font-size: 50px; color: var(--primary);">
          <i class="fa fa-paint-brush"></i>
        </div>
      </div>
      
      <div class="register-form">
        <div class="form-group">
          <label class="form-label">姓名</label>
          <input type="text" class="form-control" placeholder="请输入您的姓名">
        </div>
        
        <div class="form-group">
          <label class="form-label">电子邮箱</label>
          <input type="email" class="form-control" placeholder="example@mail.com">
        </div>
        
        <div class="form-group">
          <label class="form-label">设置密码</label>
          <input type="password" class="form-control" placeholder="请设置密码">
        </div>
        
        <div class="form-group">
          <label class="form-label">确认密码</label>
          <input type="password" class="form-control" placeholder="请再次输入密码">
        </div>
        
        <div style="display: flex; align-items: center; margin: 10px 0 20px;">
          <input type="checkbox" id="agree6" style="margin-right: 8px;">
          <label for="agree6" style="font-size: 13px;">我已阅读并同意<a href="#" class="link">服务条款</a>和<a href="#" class="link">隐私政策</a></label>
        </div>
        
        <button class="btn btn-primary btn-block">注册账号</button>
      </div>
      
      <p class="bottom-text">
        已有账号？<a href="#" class="link">立即登录</a>
      </p>
    </div>
    
    <!-- 控制按钮 -->
    <div class="control-buttons">
      <button class="control-btn" id="prevBtn">
        <i class="fa fa-chevron-left"></i> 上一个
      </button>
      <button class="control-btn" id="nextBtn">
        下一个 <i class="fa fa-chevron-right"></i>
      </button>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = 1;
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const registerPages = {
      1: document.getElementById('style1'),
      2: document.getElementById('style2'),
      3: document.getElementById('style3'),
      4: document.getElementById('style4'),
      5: document.getElementById('style5'),
      6: document.getElementById('style6')
    };
    const prevButton = document.getElementById('prevBtn');
    const nextButton = document.getElementById('nextBtn');
    
    // 初始化
    function init() {
      // 切换页面样式
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = parseInt(this.getAttribute('data-style'));
          switchStyle(style);
        });
      });
      
      // 上一个/下一个按钮
      prevButton.addEventListener('click', showPrevStyle);
      nextButton.addEventListener('click', showNextStyle);
      
      // 表单交互
      addFormInteractions();
    }
    
    // 添加表单交互
    function addFormInteractions() {
      // 所有注册按钮点击事件
      document.querySelectorAll('.btn-primary').forEach(btn => {
        btn.addEventListener('click', function() {
          const form = this.closest('.register-form');
          const inputs = form.querySelectorAll('.form-control');
          
          // 简单验证
          let isValid = true;
          inputs.forEach(input => {
            if (!input.value.trim() && input.type !== 'date') {
              input.style.borderColor = '#dc3545';
              isValid = false;
            } else {
              input.style.borderColor = '#ddd';
            }
          });
          
          if (isValid) {
            alert('注册成功！即将跳转到首页');
          } else {
            alert('请填写所有必填字段');
          }
        });
      });
      
      // 登录链接点击事件
      document.querySelectorAll('.link').forEach(link => {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          alert('跳转到登录页面');
        });
      });
      
      // 社交登录按钮点击事件
      document.querySelectorAll('.social-btn').forEach(btn => {
        btn.addEventListener('click', function() {
          const platform = this.querySelector('span')?.textContent || 
                          this.querySelector('i').classList[1].replace('fa-', '');
          alert(`使用${platform}账号登录`);
        });
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 隐藏所有页面
      Object.values(registerPages).forEach(page => {
        page.classList.remove('active');
      });
      
      // 显示选中页面
      registerPages[style].classList.add('active');
      
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (parseInt(option.getAttribute('data-style')) === style) {
          option.classList.add('active');
        }
      });
    }
    
    // 显示上一个样式
    function showPrevStyle() {
      let prev = currentStyle - 1;
      if (prev < 1) prev = 6;
      switchStyle(prev);
    }
    
    // 显示下一个样式
    function showNextStyle() {
      let next = currentStyle + 1;
      if (next > 6) next = 1;
      switchStyle(next);
    }
    
    // 启动
    init();
  </script>
</body>
</html>
